<template>
  <vab-card shadow="never">
    <TabsMode
      v-if="tabsList.length > 1"
      :Key="tabsKey"
      :tabs-list="tabsList"
      :is-update="isUpdate"
      :is-delete="isDelete"
      @handle-copy="handleCopy"
      @handle-new="handleNew"
      @handle-tab="handleTab"
      @remove-tab="removeTab"
    />
    <template #header v-if="tabsList.length == 1 && tabsList[0]">
      <div class="card-header flex_sb">
        <span>{{ tabsList[0].label }}</span>
        <div v-if="props.isUpdate" class="flex">
          <vab-icon
            icon="file-copy-2-line"
            style="margin-right: 4px"
            @click="handleCopy()"
          />
          <vab-icon
            icon="add-box-line"
            style="margin-right: 4px"
            @click="handleNew()"
          />
        </div>
      </div>
    </template>
    <!-- <template #header>
      <div class="card-header flex_sb">
        <span>收货地址信息</span>
        <div v-show="props?.isUpdate" class="flex">
          <vab-icon
            icon="file-copy-2-line"
            style="margin-right: 4px"
            @click="handleCopy('addressList', 0)"
          />
          <vab-icon icon="add-box-line" @click="handleNew('addressList')" />
          <vab-icon
            v-show="isDelete"
            icon="delete-bin-6-line"
            @click="handleDelete('addressList')"
          />
        </div>
      </div>
    </template> -->
    <el-row :gutter="24" v-for="(mode, mode_i) in props.list" :key="mode_i">
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="收货联系人" prop="receiv_contact_person">
          <el-input v-model="mode.receiv_contact_person" />
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="联系电话" prop="phone">
          <span v-if="!isUpdate" class="default-text">
            {{ Encryption(mode.phone, 'phone') }}
          </span>
          <el-input v-else v-model="mode.phone" />
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="收货地址" prop="receiv_address">
          <el-cascader
            v-model="mode.receiv_address"
            :options="props?.areaOptions"
            :props="{ value: 'code', label: 'name' }"
          >
            <template #default="{ data }">
              <span>{{ data.name }}</span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="详细地址" prop="detailed_address">
          <el-input v-model="mode.detailed_address" />
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="默认收货地址" prop="default_receiv_address">
          <el-radio-group v-model="mode.default_receiv_address">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="默认开票地址" prop="default_invoic_address">
          <el-radio-group v-model="mode.default_invoic_address">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="6" :xs="12" :sm="12" :md="12" :lg="12" :xl="6">
        <el-form-item label="默认付款地址" prop="default_pay_address">
          <el-radio-group v-model="mode.default_pay_address">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
  </vab-card>
</template>
<script lang="ts" setup>
  import TabsMode from '/@/views/corpManagement/corpCustomers/components/TabsMode.vue'
  import { Encryption } from '/@/utils/utils'
  const props: any = defineProps({
    list: {
      type: Array,
      required: true,
      default: [],
    } as any,
    isUpdate: {
      type: Boolean,
      required: true,
      default: false,
    },
    tabsList: {
      type: Array,
      required: true,
      default: [],
    } as any,
    tabsKey: {
      type: String,
      default: '',
    },
    areaOptions: {
      type: Array,
      required: true,
      default: [],
    },
  })
  // 是否可删除
  const isDelete = computed(() => {
    if (props.tabsList.length == 1) return false
    if (!props?.isUpdate) return false
    if (props?.isUpdate) return true
  })
  const emit = defineEmits([
    'handleCopy',
    'handleNew',
    'handleTab',
    'removeTab',
  ])

  // tab选择
  const handleTab = (key = '', index = 0) => {
    emit('handleTab', index)
  }
  // tab删除
  const removeTab = (key = '', index = 0) => {
    emit('removeTab', props.tabsKey, index)
  }
  // 复制
  const handleCopy = (key = '', index = 0) => {
    emit('handleCopy', props.tabsKey, index)
  }
  // 新建
  const handleNew = (key = '', index = 0) => {
    emit('handleNew', props.tabsKey, index)
  }
</script>
